import React, { useEffect } from "react";
import "../../../styles/HuangYuDong/DengLu/DengLu.scss";
import { Button, message, Form, Input } from "antd";
import pic from "../../../assets/Huangyudong/u1059.png";
import { index_hydndenglu } from "../../../api/HuangYuDong/denglu";
import { useNavigate } from "react-router-dom";
interface Props {}
function DengLu(props: Props) {


  // 验证通过后执行
  let navigate = useNavigate();
  let time: any 
  const onFinish = (values: any) => {
    // 调用接口
    console.log(values);
    index_hydndenglu().then((ok) => {
      if (ok.data.account === values.account && ok.data.pass === values.pass) {
        console.log(66);
        info("登录成功");

        time  = setTimeout(() => {
          navigate("/index");
        }, 1000);
      } else {
        info("登录失败!账户:admin,密码:123456");
      }
    });
  };
  useEffect(() => {
    return () => {
      // 清除定时器
      clearInterval(time);  
    };
  }, [time]);
  // 提示
  const [messageApi, contextHolder] = message.useMessage();
  let info = (text: string) => {
    messageApi.info(text);
  };

  return (
    <div className="denglu">
      <Form
        className="from"
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <div className="denglu-top">
          <img src={pic} alt="" />
          <h2>登录</h2>
          <h3>欢迎登录OA办公后台管理系统</h3>
        </div>
        <Form.Item
          labelAlign="left"
          label="账户"
          name="account"
          rules={[
            {
              required: true,
              message: "账号:admin",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="pass"
          rules={[
            {
              required: true,
              message: "密码：123456",
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
          {contextHolder}
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
        <h4>忘记密码请联系管理员</h4>
      </Form>
    </div>
  );
}

export default DengLu;
